<template>
  <scroll class="suggest" :data="result" :pullup="pullup" @scrollToEnd="searchMore" ref="suggest">
    <ul class="suggest-list w700">
      <li
        class="suggest-item"
        v-for="(item,index) in result"
        :key="index"
        @click="selectItem(item)"
      >
        <div class="icon">
          <i class="iconfont iconyinfu2"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getsingers(item)"></p>
        </div>
      </li>
      <van-loading v-show="hasMore" type="circular" color="#fff" vertical>加载更多...</van-loading>
    </ul>
  </scroll>
</template>

<script>
import { getSearchResult } from "@/request/api";
import { createSearchSongs, filterSinger } from "@/common/song.js";
import Scroll from "@/base/scroll/scroll";
import { playListMixin } from "@/common/mixin.js";
import { mapActions } from "vuex";
import { debounce } from "@/utils/debounce";

export default {
  mixins: [playListMixin],
  props: {
    query: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      offset: 0,
      // 取值意义: 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018: 综合
      type: 1,
      //返回数量：
      limit: 20,
      result: [],
      pullup: true,
      hasMore: true,
      total: 0,
      page: 1,
      beforeScroll: true
    };
  },
  methods: {
    handlePlayList(playlist) {
      this.$refs.suggest.refresh();
    },
    async search() {
      this.hasMore = true;
      // this.page = 1;
      const res = await getSearchResult({
        keywords: this.query,
        limit: this.limit,
        offset: this.offset,
        type: this.type
      });
      if (res.code !== 200) {
        this.$toast("获取搜索结果失败");
        return;
      }
      this.total = res.result.songCount;
      // 第一次搜索就没有搜索出结果：
      if (this.page === 1 && this.total === 0) {
        this.hasMore = false;
        this.$toast("没有搜索到结果");
        return;
      }
      if (this.total === 0 || this.total < this.offset) {
        this.hasMore = false;
        return;
      }

      this.result = [...this.result, ...this._normalizeSongs(res.result.songs)];
    },
    // 获取歌手
    getsingers(item) {
      return `${item.name}-${item.singer}`;
    },
    _normalizeSongs(list) {
      let ret = [];
      list.forEach(musicData => {
        ret.push(createSearchSongs(musicData));
      });
      return ret;
    },
    searchMore() {
      // bs到底加载更多：
      if (!this.hasMore) {
        this.$toast("没有更多搜索结果了");
        return;
      }
      this.page++;
      this.offset += this.limit;
      this.search();
    },
    ...mapActions(["insertSong"]),
    selectItem(item) {
      this.insertSong(item);
      this.$emit("select", item);
    },
    research() {
      // 当搜索框变化则重新搜索：
      console.log("research");

      this.search();
      this.$refs.suggest.scrollTo(0, 0);
      this.result = [];
      this.page = 1;
      this.offset = 0;
    }
  },
  watch: {
    query(value) {
      debounce(this.research(), 200);
    }
  },
  components: {
    Scroll
  }
};
</script>

<style lang="less" scoped>
.suggest {
  height: 100%;
  overflow: hidden;
  .suggest-list {
    .suggest-item {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      .icon {
        font-size: @font-size-small;
        margin: 0 10px;
        color: @mc;
      }
      .name {
        flex: 1;
        font-size: @font-size-medium;
        color: #f9f9f9;
        overflow: hidden;
        .text {
          .sl;
        }
      }
    }
  }
}
.no-result-wrapper {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>